<template>
  <div>
    <div class="edu-page-title">基本信息</div>
    <el-card shadow="never" body-style="padding: 24px;" class="bg-white">
      <el-form label-width="120px" class="bg-white">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="学号：">
              <span class="el-form-item__label" v-if="self">{{studentId}}</span>
              <el-input
                v-else
                v-model="studentId"
                @keyup.enter.native="getStudentDetailById([studentId])"
                @bulr="getStudentDetailById([studentId])"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名：">
              <span class="el-form-item__label" v-if="self">{{data.name}}</span>
              <el-input v-else :value="data.name" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别 :">
              <span class="el-form-item__label" v-if="self">{{data.sex}}</span>
              <el-input v-else :value="data.sex" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出生日期 :">
              <span class="el-form-item__label" v-if="self">{{data.birthday}}</span>
              <el-input v-else :value="data.birthday | formatDate('yyyy-MM-dd')" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="年级 : :">
              <span class="el-form-item__label" v-if="self">{{data.grade}}</span>
              <el-input v-else :value="data.grade" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学生类别 :">
              <span class="el-form-item__label" v-if="self">{{data.studentCategoryI18n}}</span>
              <el-input v-else :value="data.studentCategoryI18n" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学院 :">
              <span class="el-form-item__label" v-if="self">{{data.facultyI18n}}</span>
              <el-input v-else :value="data.facultyI18n" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="专业 :">
              <span class="el-form-item__label" v-if="self">{{data.professionI18n}}</span>
              <el-input v-else :value="data.professionI18n" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="籍贯 :">
              <span class="el-form-item__label" v-if="self">{{data.nativePlaceI18n}}</span>
              <el-input v-else :value="data.nativePlaceI18n" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="政治面貌 :">
              <span class="el-form-item__label" v-if="self">{{data.nativePlaceI18n}}</span>
              <el-input v-else :value="data.nativePlaceI18n" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学籍状态 :">
              <span class="el-form-item__label" v-if="self">{{data.registrationStatusI18n}}</span>
              <el-input v-else :value="data.registrationStatusI18n" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { getStudentDetail } from 'common/src/api/abnormal'
export default {
  data() {
    return {
      data: {},
    }
  },
  mounted() {
    if (this.self) {
      this.getStudentDetailById([this.studentId])
    }
  },
  methods: {
    getStudentDetailById(data) {
      getStudentDetail(data).then(
        (response) => {
          let { code, data } = response
          if (code === 200) {
            this.data = data[0]
          }
        },
        (xhr) => {}
      )
    },
  },
  props: {
    studentId: {
      type: String,
      required: false,
    },
    self: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
}
</script>
<style scoped>
.fiex {
  display: flex;
}
.flex-start {
  justify-content: flex-start;
}
</style>